<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item>
            <h3>测试报告</h3>
        </el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
     
        <el-row :gutter="2">
            <el-col :span="16" :offset="4">
                <div align="middle">
                    <h2>文件上传</h2>
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="2">
            <el-col :span="16" :offset="4">
                <el-form>
                    
                    <el-form-item>
                        <el-upload ref="upfile" style="display: inline" :auto-upload="false" 
                        :on-change="handleChange"
                            :file-list="fileList" action="#">
                            <el-button type="success">选择文件</el-button>
                        </el-upload>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" @click="upload">上传到接口服务器</el-button>

                    </el-form-item>

                </el-form>

            </el-col>
        </el-row>

        <el-divider />

        <el-row :gutter="2">
            <el-col :span="16" :offset="4">
                <div align="middle">
                    <h2>测试报告下载</h2>
                </div>
            </el-col>
        </el-row>

        <!-- gutter	栅格间隔  span	栅格占据的列数 offset	栅格左侧的间隔格数 -->
        <el-row :gutter="2">
            <el-col :span="4" :offset="2">
                <el-button type="success" @click="exportExcel">导出API接口测试报告</el-button>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="success" @click="exportExcel">导出UI自动化测试报告</el-button>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="success" @click="exportExcel">导出小程序自动化测试报告</el-button>
            </el-col>
            <el-col :span="4" :offset="2">
                <el-button type="success" @click="exportExcel">导出APP自动化测试报告</el-button>
            </el-col>
        </el-row>

    </el-card>
</template>


<script >
//reactive定义复杂的数据类型的数据，ref推荐定义基本数据类型，所以如果要使用reactive定义基本数据类型的话，
// reactive 和 ref 都是用来定义响应式数据的 reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型
// var 是函数级作用域，let是块级作用域  const 是通用的
//    <!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
//     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用-->
import { ArrowRight } from '@element-plus/icons-vue'     //图标

import { ElMessage } from 'element-plus';
import { ref, reactive } from 'vue'
import { api_upload } from "../../../api/workers";


export default {
    name: 'UploadUi',
    data() {
        return {
            name: 'uploadfile',
            fileList: []
        }
    },
    methods: {
        //通过onchanne触发方法获得文件列表
        handleChange(file, fileList) {
            this.fileList = fileList;
            console.log('上传文件:', this.fileList)
        },
        upload() {
            let fd = new FormData();
            fd.append("name", this.fileList);
            console.log(this.fileList['name'])

            this.fileList.forEach(item => {
                //文件信息中raw才是真的文件
                fd.append("files", item.raw);
                console.log('file-->', item.raw)
            });
            api_upload(fd).then(
                res => {
                    console.log(res['data']['code'])
                    let ret = res['data']['code']
                    let msg = res['data']['msg']
                    if (ret === 200) {

                        ElMessage({
                            message: msg,
                            type: 'success',
                        })
                    }
                    if (ret === 300) {
                        ElMessage({
                            message: msg,
                            type: 'warning',
                        })
                    }
                    if (ret === 500) {
                        ElMessage({
                            message: msg,
                            type: 'warning',
                        })
                    }

                }
            )

        },
        exportExcel() {
            console.log('exportreport');
            api_download().then(
                res => {
                    console.log('res-->', res);
                    console.log(res['headers']);
                    const fileName = res['headers']["content-disposition"].split(';')[1];
                    console.log("filename-->", fileName);
                    let blob = new Blob([res], { type: "text/html" });
                    let objectUrl = URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
                    const link = document.createElement("a");
                    link.href = objectUrl;
                    //                            link .download = 'a.html';
                    link.setAttribute("download", 'a.html')

                    link.click();     //下载文件
                    // 释放这个临时的对象url
                    window.URL.revokeObjectURL(objectUrl);


                }
            ).catch((error) => {
                alert('下载失败')
            })

        }
    }
}


</script>


<style lang="less" scoped>
.box-card {
    height: 100%;
}
</style>



